<template>
    <div class="kfHumanConfig">
        <van-nav-bar
                title="人员配置"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="top-column">
            <van-field
                    v-model="searchName"
                    left-icon="search"
                    placeholder="搜索姓名"
            />
            <div class="btn" @click="getList">搜索</div>
        </div>
        <div class="top-column">

            <div class="btn" v-if="button1" @click="EditorClick('add')">新增人员</div>
            <div class="btn" @click="goPeopleList">人员池</div>
        </div>

        <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
            <el-table-column fixed type="selection"></el-table-column>
            <el-table-column fixed prop="realname" label="姓名" width="120"></el-table-column>
            <el-table-column prop="certificate_code" label="身份证号" width="180"></el-table-column>
            <el-table-column prop="sex_text" label="性别" width="50"></el-table-column>
            <el-table-column prop="age_str" label="年龄" width="80"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="120"></el-table-column>
            <el-table-column prop="contract_text" label="合同是否上传" width="110"></el-table-column>
            <el-table-column
                    label="操作"
                    width="140">
                <template slot-scope="scope">
                    <el-button v-if="button2" @click="UploadClick(scope.row)" type="text" size="small">合同上传</el-button>
                    <el-button v-if="button3" @click="EditorClick('editor',scope.row)" type="text" size="small">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <van-pagination class="pagination" v-model="page" :page-count="pageCount" @change="pageChange"/>
        <van-button v-if="button4" class="pagination" type="warning" @click="delTable" size="large">删除</van-button>
    </div>
</template>

<script>
    // confirmDialog
    export default {
        name: "kfHumanConfig",
        components: {},
        data() {
            return {
                tableData: [],
                page: 1,
                limit: 10,
                pageCount: 10,
                searchName: '',
                tableSelectValArr: [],
                button1: false,
                button2: false,
                button3: false,
                button4: false,
            }
        },
        methods: {
            goPeopleList() {
                let id = this.$route.query.id
                this.$router.push(`/kfPeoplePoolList?id=${id}`)
            },
            UploadClick(data) {
                this.$router.push(`/kfHumanUpFile?id=${data.id}&goodsId=${data.member_goods_id}&name=${data.realname}`)
            },
            EditorClick(type = '', data) {
                if (type == 'add') {
                    let id = this.$route.query.id
                    this.$router.push(`/kfHumanAdd?id=${id}&type=${type}`)
                } else {
                    let id = data.id
                    this.$router.push(`/kfHumanAdd?id=${id}&type=${type}`)
                }
            },
            pageChange() {
                this.getList();
            },
            getList() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    member_goods_id: this.$route.query.id,
                    li_realname: this.searchName || '',
                    page: this.page,
                    limit: this.limit,
                };
                this.$post("/api/order_roster/staffing", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.pageCount = res.data.totalPage // 发票类型
                            this.tableData = res.data.dataList // 发票类型
                            this.$Toast.clear();
                        }
                    })
                    .catch(err => {
                    });
            },
            tableSelectChange(val) {
                this.tableSelectValArr = val;
            },
            delTable() {

                if (this.tableSelectValArr.length == 0) {
                    this.$Toast('请选择人员')
                    return;
                }
                let Arr = []
                this.tableSelectValArr.map((item, index) => {
                    Arr.push(item.id)
                })
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认删除这几个产品么',
                    closeOnPopstate: true,
                }).then(() => {
                    let params = {
                        wx_member_id: localStorage.getItem('wx_member_id'),
                        token: localStorage.getItem('token'),
                        ids: Arr,

                    };
                    this.$post("/api/order_roster/del_staffing", params)
                        .then(res => {
                            if (res.code == 1) {
                                this.getList();
                                this.$Toast(res.msg);
                            }
                        })
                        .catch(err => {
                        });
                })
                    .catch(() => {
                    });
            },
        },
        created() {
            this.button1 = this.$queryMenu('Customer/add_hr')
            this.button2 = this.$queryMenu('Customer/hr_contract')
            this.button3 = this.$queryMenu('Customer/edit_hr')
            this.button4 = this.$queryMenu('Customer/del_hr')

            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });

            this.getList();
        },

    }
</script>

<style scoped lang="less">
    .kfHumanConfig {
        padding: 15px;

        .van-cell {
            border: 1px solid #dcdcdc;
            padding: 3px 10px;
        }

        .btn {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            width: 45vw;
            height: 32px;
            margin: 5px;
            background-image: linear-gradient(90deg, #5b8ed1 1%, #366cb3 100%);
            border-radius: 5px;
        }
    }

    .top-column {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .pagination {
        margin-top: 11px;
    }

    .date-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 11px;

        > div:nth-of-type(1) {
            width: 70px;
        }
    }

    .line {
        display: flex;
        align-items: center;

        .border-line {
            border: 1px solid #dcdcdc;
            padding: 0 2px;
            margin: 0 3px;
            border-radius: 3px;
        }

        .time-text {
            flex-wrap: nowrap;
            width: 50px;
        }

        > .money-box {
            position: relative;

            > div {
                flex: 1;
                margin: 3px 6px;
                border: 1px solid #dcdcdc;
                color: #333;
                border-radius: 5px;
            }

            > .money-box {
                position: relative;

                span {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                input {
                    border: none;
                    padding-left: 6px;
                    height: 25px;
                    width: 112px;
                    padding-right: 10px;
                    font-size: 12px;
                    text-align: right;
                }
            }
        }
    }

    .table-box {
        overflow-x: scroll;
    }
</style>